<template>
  <div class="item-view">
    <div class="content" @click="goToDetail">
      <img class="face-icon" :src="faceIcon" alt="" />
      <div class="info">
        <div v-for="(item, index) in list" :key="index" class="item">
          <svg-icon class="item-icon" :name="item.icon"></svg-icon>
          <div class="value">{{ item.value }}</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="time-wrap">
        <svg-icon class="time-icon" name="item-time"></svg-icon>
        {{ data.create_at }}
      </div>
      <div class="download-wrap" @click.stop="clickDownload">
        <svg-icon class="download-icon" name="item-download"></svg-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';

import faceIcon from '@/assets/images/demo/face.png';

const props = defineProps({
  data: {
    type: Object as any,
    default: () => {
      return {};
    },
  },
  url: {
    type: String,
    default: '',
  },
});

const router = useRouter();
const list = computed(() => {
  return [
    { icon: 'item-user', value: props.data.name || '陌生人', key: 'user' },
    { icon: 'item-rate', value: props.data.num, key: 'rate' },
    { icon: 'item-position', value: props.data.address, key: 'position' },
  ];
});
const goToDetail = () => {
  router.push({ path: props.url, query: { id: props.data.id } });
};
const clickDownload = () => {
  //   to do
};
</script>

<style lang="less" scoped>
.item-view {
  width: 100%;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e9e9e9;
  padding: 0 12px;
  cursor: pointer;
  box-shadow: 3px 22px 50px -2px rgb(121 120 130 / 15%);

  .content {
    height: calc(100% - 48px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #c6ced9;

    .face-icon {
      height: 100%;
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 2px 0;
      gap: 10px;

      .item {
        display: flex;
        gap: 6px;

        .item-icon {
          width: 16px;
          height: 16px;
        }

        .value {
          font-size: 12px;
          line-height: 16px;
          color: #2d3748;
        }
      }
    }
  }

  .footer {
    height: 48px;
    padding: 5px 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .time-wrap {
      height: 100%;
      font-size: 12px;
      color: rgb(45 55 72 / 60%);
      display: flex;
      align-items: center;
      gap: 10px;

      .time-icon {
        width: 16px;
        height: 16px;
      }
    }

    .download-wrap {
      width: 26px;
      height: 26px;
      background: rgb(33 106 238 / 10%);
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;

      .download-icon {
        width: 21px;
        height: 21px;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
